<template>
  <div class="songs__item">
    <div class="songs__item--num">
      {{id+1}}
    </div>
    <div class="songs__item--dsc">
      <div class="songs__item--name">
        {{song.name}}
      </div>
      <div class="songs__item--singer">    
       {{getSinger}}
      </div>
    </div>
    <div class="songs__item--icon">
      <i class="iconfont icon-wodetubiao-253"></i>
    </div>
  </div>
</template>
<script setup>
import {computed, defineProps, reactive} from 'vue'
const props =  defineProps({
  song:Object,
  id:Number
})
const singer = reactive(props.song)
const getSinger = computed(()=>{
  let nameStr = []
  for(let i=0; i < singer.ar.length;i++){
    nameStr.push(singer.ar[i].name)
  }
  return `${nameStr.join('/')}`
})
</script>

<style lang="stylus" scoped>
.songs__item
  width 100%
  display flex
  .songs__item--num
    width 34px
    height 44px
    line-height 44px
    text-align left 
    color #777 
  .songs__item--dsc
    overflow hidden
    flex 1
    box-sizing border-box
    padding-right 10px
    .songs__item--name
      height 50%
      line-height 22px
      font-size 14px
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
    .songs__item--singer
      width 200px
      font-size 12px
      color #777
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
  .songs__item--icon
    width 44px
    height 44px
    line-height 44px
    text-align center
    .icon-wodetubiao-253
      font-size 24px
      color #777
</style>